<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--移动端适配-->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #app {
      width: 100%;
      height: 100vh;
      display: flex;
      background-color: papayawhip;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #app > div {
      width: 360px;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: #2b669a solid 1px;
    }

    input:nth-child(2) {
      margin-top: 10px;
    }

    .isp {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .isp label {
      margin-right: 20px;
    }

    #login {
      width: 60px;
      height: 30px;
      margin-right: 30px;
    }
    #logOut {
      width: 60px;
      height: 30px;
    }
  </style>
</head>
<body>

<div id="app">
  <div>
    <h3>校园网登录</h3>
    <div>
      <label for="username">用户名: </label>
      <input type="text" id="username" placeholder="请输入用户名">
    </div>
    <div>
      <label for="password">密&nbsp;&nbsp;&nbsp;码: </label>
      <input type="text" id="password" placeholder="请输入密码">
    </div>
    <div>
      <label for="ip">ip地址: </label>
      <input type="text" id="ip" placeholder="请输入ip">
    </div>
    <div class="isp">
      <label>
        <input type="radio" name="ISP" value="telecom">
        电信
      </label>
      <label>
        <input type="radio" name="ISP" value="unicom">
        联通
      </label>
      <label>
        <input type="radio" name="ISP" value="cmcc" checked>
        移动
      </label>
    </div>
    <div style="margin-bottom: 10px">
      <button id="login">登录</button>
      <button id="logOut">注销</button>
    </div>
    <h4>认证状态: <span style="color: red"></span></h4>
  </div>
</div>

<script>
  // 登录所需数据
  let ip = '10.157.100.21'
  let username = '1905030105'
  let password = '1436393509'
  let method = 'cmcc' // 联通unicom 电信telecom
  let many = 0
  let logFlag = 1
  let loginUrl = `
    http://login.hnust.cn:801/eportal/?c=Portal&a=login&login_method=1&user_account=%2C0%2C${username}%40${method}&user_password=${password}
    &wlan_user_ip=${ip}&wlan_user_ipv6=&wlan_user_mac=000000000000&wlan_ac_ip=&wlan_ac_name=&jsVersion=3.3.3&v=7528&callback=showData`
  let logOutUrl = ''

  let user = document.getElementsByTagName('input')[0]
  let pwd = document.getElementsByTagName('input')[1]
  let isps = document.querySelectorAll('input[name="ISP"]')
  let logBtn = document.getElementById('login')
  let logOutBtn = document.getElementById('logOut')
  let status = document.getElementsByTagName('span')[0]
  let ipAddr = document.getElementsByTagName('input')[2]

  user.value = username
  pwd.value = password
  ipAddr.value = ip

  logBtn.onclick = function () {
    logFlag = 1
    for (let i = 0; i < isps.length; i++) {
      if (isps[i].checked) {
        method = isps[i].value
      }
    }
    username = user.value
    password = pwd.value
    ip = ipAddr.value
    loginUrl = `
    http://login.hnust.cn:801/eportal/?c=Portal&a=login&login_method=1&user_account=%2C0%2C${username}%40${method}&user_password=${password}
    &wlan_user_ip=${ip}&wlan_user_ipv6=&wlan_user_mac=000000000000&wlan_ac_ip=&wlan_ac_name=&jsVersion=3.3.3&v=7528&callback=showData`

    console.log(username, password, method)
    login()
  }

  logOutBtn.onclick = function () {
    logFlag = 0
    logOutUrl = `http://login.hnust.cn:801/eportal/?c=Portal&a=logout&callback=showData`
    login()
  }

  window.onload = login

  // 原生js发送请求 jsonp 跨域
  function login() {
    // 创建script标签
    let script = document.createElement('script')
    script.src = logFlag === 1 ? loginUrl : logOutUrl
    // 将能实现发送跨域请求的script标签插入html
    document.body.appendChild(script)
  }

  // 回调函数
  function showData(data) {
    many++
    if (data.result === "1") {
      status.innerHTML = data.msg + '--' + many
    } else if (data.ret_code === 1) {
      if (data.msg.indexOf("UmF") !== -1) {
        status.innerHTML = '用户的联通账号无效' + '--' + many
      } else if (data.msg.indexOf("dXN") !== -1) {
        status.innerHTML = '用户的电信账号无效或密码错误' + '--' + many
      }
    } else if (data.ret_code === 2) {
      status.innerHTML = '已登录或者其他原因登录失败' + '--' + many
    } else if (data.ret_code === 3) {
      status.innerHTML = '运营商错误' + '--' + many
    }
    console.log(data)
  }


</script>
</body>
</html>
